<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
<canvas width="600px" height="500px" id="canvas"></canvas>
<script>
    const ctx = document.querySelector("#canvas").getContext("2d")

    ctx.fillStyle = 'orange'

    //旋转   将整个画布进行旋转
    ctx.rotate(15 * Math.PI / 180)

    // 缩放  水平方向的比例   垂直方向的比例
    ctx.scale(2, 1)

    // 平移  水平方向平移   垂直方向平移
    ctx.translate(-100, 100)

    // 变形 6个参数：水平缩放，水平倾斜，垂直倾斜，垂直缩放，水平移动，垂直移动
    // ctx.transform()    相当于 ctx.setTransform(a,b,c,d,e,f)

    ctx.fillRect(100, 100, 200, 100)

    ctx.beginPath()
    ctx.fillStyle = "black";
    ctx.fillRect(20, 20, 25, 25);

    // 绘制旋转的正方形
    ctx.setTransform(1, 0, 0, 1, 0, 0);
    let angleInRadians = 45 * Math.PI / 180;
    ctx.rotate(angleInRadians);
    ctx.translate(220,100)
    ctx.fillStyle = "red";
    ctx.fillRect(100, 100, 50, 50);

</script>
</body>
</html>